<template>
	<div class="upload-container">
		<el-upload
			ref="upload"
			class="upload-demo"
			action="#"
			accept=".mp4"
			:show-file-list="false"
			:auto-upload="false"
			:limit="limit"
			:multiple="false"
			:disabled="fileList.length >= limit"
			:file-list="fileList"
			:on-change="handleChange"
		>
			<div v-for="(item, index) in fileList" :key="item.url" class="picBox" @click.stop>
				<video class="picBox" controls>
					<source :src="item.url" type="video/ogg" />
				</video>
				<i class="el-icon-close" @click.stop="handleRemove(index)" />
			</div>

			<i v-if="fileList.length < limit" class="el-icon-plus picBox" />
			<div slot="tip" class="el-upload__tip">*视频仅支持MP4格式，最大限制{{ maxSize }}M；</div>
		</el-upload>
	</div>
</template>

<script>
	export default {
		name: 'videos-upload',
		props: {
			limit: {
				type: Number,
				default: 1
			},
			maxSize: {
				type: Number,
				default: 10
			},
			fileList: {
				type: Array,
				default() {
					return []
				}
			}
		},
		data() {
			return {
				// fileList: [],
				maxLength: 1
			}
		},
		methods: {
			// 上传了新文件
			handleChange(file, fileList) {
				const { raw } = file
				if (raw) {
					const fileType = raw.type === 'video/mp4'
					const isSize = raw.size / 1024 / 1024 < this.maxSize
					if (!fileType || !isSize) {
						this.$message.error(
							!fileType
								? '文件类型只支持MP4格式！'
								: `上传图片文件大小不能超过${this.maxSize}MB！`
						)
						return
					}
					file.name = this.MathRand() + '_' + raw.name
					file.url = URL.createObjectURL(raw)
					file.index = fileList.length - 1
					this.fileList.push(file)
					this.$emit('files', this.fileList)
				} else {
					this.fileList.push(file)
					this.$emit('files', this.fileList)
				}
			},
			MathRand() {
				var Num = ''
				for (var i = 0; i < 8; i++) {
					Num += Math.floor(Math.random() * 10)
				}
				return Num
			},
			handleRemove(index) {
				this.fileList.splice(index, 1)
				this.$emit('files', this.fileList)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/styles/mixin.scss';
	.upload-container {
		width: 100%;
		position: relative;
		@include clearfix;
		.image-uploader {
			width: 60%;
			float: left;
		}
	}
	.picBox {
		position: relative;
		font-size: 28px;
		color: #8c939d;
		width: 380px;
		height: 180px;
		line-height: 180px;
		text-align: center;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		margin: 0 10px 10px 0;
		&:hover {
			border-color: #409eff;
		}
		::v-deep {
			.el-icon-close {
				font-size: 13px;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 99;
				color: #fff;
				padding: 3px;
				background-color: #aaa;
				border-radius: 50%;
				box-shadow: 0 0 6px #666;
			}
		}
		.upload-img {
			width: 100%;
			display: block;
		}
	}
	.tip-warn {
		color: #333;
		font-size: 12px;
		padding: 6px 10px;
		line-height: 20px;
		border: 1px solid #fcd68b;
		border-radius: 2px;
		background: #fef2db;
		margin: 0 0 16px;
		display: flex;
		.el-icon-info {
			color: #faae17;
			margin: 4px 6px 0 0;
			display: inline-block;
		}
	}
	::v-deep {
		.upload-demo {
			display: flex;
			flex-wrap: wrap;
		}
		.upload-demo .el-upload {
			width: auto;
			text-align: left;
		}
		.el-upload__tip {
			display: block;
			color: #5390f9;
			width: 100%;
			line-height: 18px;
			margin-bottom: 5px !important;
		}
		.dialog-footer {
			margin-top: 50px;
			.el-button {
				width: 100px;
			}
		}
	}
</style>
